<template>
	<van-nav-bar right-text="帮助" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
	<div class="twoBox">
		<h2>欢迎登录饱了么</h2>
		<div class="pass_box">
			<!-- <div class="yi">
				<h2>输入验证码</h2>
				<p>验证码已发送至
					<span>{{ loginData.username }}</span>
				</p>
			</div> -->
			<van-cell @touchstart.stop="show = true">
				
				<van-cell-group inset>
					<!-- maxlength	输入的最大字符数 -->
					<van-field @keyup.enter="sendEmail()" v-model="loginData.username" maxlength="20" label-width="30px"
						label="邮箱" name="用户名" left placeholder="请输入邮箱" :rules="[{ required: true, message: '请填写用户名' }]" />
					<span v-if="show2">未注册的邮箱验证后自动创建饱了么账户</span>
					<!-- 数字安全键盘 -->
					<!-- <van-number-keyboard v-model="loginData.inputCheckCode" :show="show" theme="custom" close-button-text="完成"
						@blur="show = false" @input="onInput" @delete="onDelete" /> -->
					<!-- 密码登录 -->
					<van-field type="password" :show="isLoginByPassword" @keyup.enter="login()" label-width="30px"
						v-model="loginData.password"	 maxlength="16" clearable label="密码"
						:rules="[{ required: true, message: '请填写密码' }]" placeholder="请输入密码">
					</van-field>
				</van-cell-group>
			</van-cell>
			<van-button class="login-btn" @click="login()" round block color="#ffd101" native-type="submit"
				style="margin-top: 20px">
				<span style="color: black;font-weight: bold;">登 录</span>
			</van-button>
		</div>
	</div>
</template>
<script>
	import {
		Toast
	} from 'vant';
	import qs from 'qs'
	import storage from '../utils/localstorage.js'
	export default {
		data() {
			return {
				//是否用密码登录
				isLoginByPassword: false,
				//登录数据
				loginData: {
					username: '',
					password: '',
					inputCheckCode: '',
					checkCode: '',
				},
				countdown: 2,
				value: '',
				phone: '',
				disabled: true,
				judge: false,
				show: false,
			}
		},
		mounted() {
			this.getIsLoginByPassword()
			this.getUsername();
			this.setCountdown();
		},
		methods: {
			getIsLoginByPassword() {
				// this.isLoginByPassword = this.$route.params.isLoginByPassword;
				if (this.$route.params.isLoginByPassword != null || this.$route.params.isLoginByPassword != '') {
					this.isLoginByPassword = this.$route.params.isLoginByPassword;
					this.isLoginByPassword = true;
					this.loginData.username = this.$route.params.username
				} else {
					this.isLoginByPassword = false;
				}
				console.log("isLoginByPassword=" + this.isLoginByPassword);

			},
			getUsername() {
				this.loginData.username = this.$route.params.username;
				console.log("this.$route.params.username=" + this.$route.params.username);
				console.log("this.loginData.username=" + this.loginData.username);
			},
			setCountdown() {
				this.phone = this.$route.params.username;
				this.disabled = true;
				let interval = setInterval(() => {
					this.countdown--;
					if (this.countdown === 0) {
						this.countdown = "重新发送"
						this.disabled = false;
						this.judge = true
						clearInterval(interval);
					}
				}, 1000)
			},
			onInput(value) {
				Toast(value);
			},
			login() {
				if (this.loginData.username == '') {
					Toast.fail("请输入用户名")
					return;
				}
				if (this.loginData.password == '') {
					Toast.fail("请输入密码")
					return;
				}
				this.$axios.post('/user/login/password', qs.stringify(this.loginData))
					.then(res => {
						storage.save("userId", res.result.data.id)
						storage.save("token", res.result.data.token)
						Toast.success("登录成功")
						this.$router.replace('/homepage');

					})
			},
			onClickLeft() {
				history.back();
			},
			onClickRight() {
				Toast.success("帮助")
			}
		},
		computed: {
			// if(this.countdown==0){
			// 	console.log(132);
			// }
		},
	};
</script>
<style scoped>
	* {
		font-family: "microsoft yahei";
	}

	.twoBox {
		margin: 0 50px 0 50px;
	}

	.twoBox span {
		font-size: 10px;
		color: #999999;
	}
	.van-button1 {
		/* margin-left: -30px; */
		/* margin-left: -20px; */
	}

	.pass_box {
		/* border: 1px solid red; */
		/* margin: 30px 20px 0px 20px; */
	}


	.login-btn {
		font-size: 0.9em;
	}
</style>
